<template>
  <div class="home">
    <template v-if="!isUser">
      <headerPage></headerPage>
    </template>
    <template v-else>
      <headerUserPage></headerUserPage>
    </template>
    <div class="pt100">
      <nuxt/>
    </div>
    <div class="serveFixed">
      <div class="return" @click="back">
        <img :src="reutrnImg" alt="" class="returnImg">
      </div>
    </div>
    <footerPage></footerPage>
  </div>
</template>
<script>
  import headerPage from '~/components/common/headPage'
  import footerPage from '~/components/common/footer'
  import headerUserPage from '~/components/common/headUserPage'
  export default {
    components: {
      headerPage,
      footerPage,
      headerUserPage
    },
    data() {
      return {
        isUser: false,
        reutrnImg: 'img/index/return.png'
      };
    },
    methods: {
      back() {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
      }
    }
  }
</script>
<style lang="scss">
  @import '~/static/css/base.scss';
</style>
<style>
  .container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .title {
    font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
  }

  .subtitle {
    font-weight: 300;
    font-size: 42px;
    color: #526488;
    word-spacing: 5px;
    padding-bottom: 15px;
  }

  .links {
    padding-top: 15px;
  }
</style>
<style lang="less">
  #wloading {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    .wloading {
      width: 40px;
      height: 40px;
      margin: 17.5% auto 0;
      text-align: center;
      padding-top: 7px;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 6px 16px rgba(153,153,153,0.8);
      svg path,
      svg rect{
        fill: #f3323b;
      }
    }
  }

  #loading {
    position: static;
  }
  .pt150 {
    padding-top: 150px;
  }
  .pt100 {
    padding-top: 100px;
  }
  .ivu-spin-fix {
    position: fixed;
    z-index: 99999;
  }
  .serveFixed {
    cursor: pointer;
    position: fixed;
    bottom: 5%;
    z-index: 999;
    right: 20px;
    .serve {
      width: 48px;
      height: 150px;
      text-align: center;
      background: #ee5054;
      i {
        font-size: 60px;
        line-height: 60px;
        margin-left: -6px;
        margin-top: -15px;
        color: #fff;
      }
      p {
        padding: 0 14px;
        margin-top: -8px;
        font-size: 2rem;
        color: #fff;
        line-height: 22px;
      }
    }
    .return {
      background: #ee5054 !important;
      width: 48px;
      height: 48px;
      position: relative;
      cursor: pointer;
      .returnImg{
        position: absolute;
        top: 14px;
        left: 14px;
        width: 20px;
        height: 20px;
      }
      i {
        font-size: 60px;
        color: #fff;
        margin-left: -6px;
        position: relative;
        top: -20px;
      }
      .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
        background: #ee5054;
      }
      .ivu-back-top-inner {
        width: 48px;
        height: 48px;
        background: #ee5054;
        transition: all 0.2s ease;
        &:hover {
          width: 48px;
          height: 48px;
          background: #ee5054;
        }
        .ivu-icon-chevron-up {
          visibility: hidden;
        }
      }
      .icon-top {
        display: block !important;
        color: #fff;
      }
    }
  }
</style>
